<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../../js/vue.js"></script>
		<title>03天气案例_深度监视</title>
	</head>
	<body>
		<!-- 
		  深度监视:
				(1).Vue中的watch默认不监测对象内部值的改变(一层）。
				(2).配置deep:true可以监测对象内部值改变（多层）。
		  备注:
				(1).vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
				(2).使用watch时根据数据的具体结构，决定是否采用深度监视。 
		 -->

		<div id="root">
			<h3>今天天气很{{info}}</h3>
			<button @click="changeWeather">切换天气</button>
			<hr>
			<h3>a的值为:{{numbers.a}}</h3>
			<button @click="addNumber_a">点我让a++</button>
			<hr>
			<h3>b的值为:{{numbers.b}}</h3>
			<button @click="numbers.b++">点我让b++</button>

			<hr>
			<h3>我的爱好是:{{hobbys.hobby}}</h3>
			<button @click="hobbys.hobby = '喝酒' ">改变我的爱好</button>

		</div>
		<script>
			const vm = new Vue({
				el: '#root',
				data: function() {
					return {
						isHot: true,
						numbers: {
							a: 1,
							b: 2
						},
						hobbys: {
							hobby: '抽烟'
						}
					}
				},
				methods: {
					changeWeather() {
						this.isHot = !this.isHot;
					},
					addNumber_a() {
						this.numbers.a++;
					}
				},
				computed: {
					info() {
						return this.isHot ? '炎热' : '凉爽';
					}
				},
				watch: {
					//监视计算属性
					info: {
						immediate: false,
						handler(newValue, oldValue) {
							console.log('oldValue', oldValue);
							console.log('newValue', newValue);
							console.log('info执行了');
						}
					},
					//监视多级结构中某一个属性的变化
					// 'numbers.a': {
					// 	handler() {
					// 		console.log('a的值发生了变化');
					// 	}
					// },
					// 'numbers.b': {
					// 	handler() {
					// 		console.log('b的值发生了变化');
					// 	}
					// }


					//vue默认可以监测到多层次(多级类型的数据结构)的数据变化的，但是vue为程序员提供的watch默认不能监测到，如果要监测到，需要配置deep: true
					//监视多级结构中所有属性的变化 
					numbers: {
						deep: true,
						handler() {
							console.log('numbers发生了变化');
						}
					},
					hobbys: {
						deep: true,
						handler() {
							console.log('hobbys发生了变化');
						}
					}
				}
			});
		</script>
	</body>
</html>